<template>
  <!-- 接触镜评估 -->
    <el-form inline size="mini">
      <el-row class="bg-row">
        <el-form-item label="验光号">
          <el-input v-model="checkData.checkNumber" readonly></el-input>
        </el-form-item>
        <el-form-item label="验光师">
          <el-input  v-model="checkData.checker" readonly></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-input  v-model="checkData.checkDate" readonly></el-input>
        </el-form-item>
      </el-row>
      <el-row class="bg-row">
        <el-form-item label="卡号" v-if="customerData.cardNum">
          <el-input v-model="customerData.cardNum" @keyup.enter.native="getCustomerByCardNo()"></el-input>
        </el-form-item>
        <el-form-item label="卡号" v-else>
          <el-input v-model="customerData.uniqueCode"></el-input>
        </el-form-item>
        <el-form-item label-width="0">
          <el-button type="primary" icon="el-icon-search" @click="openDialog('customer')">查询</el-button>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input class="width-125"  v-model="customerData.name" readonly></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input class="width-125" v-if="customerData.gender == 0" value="男" readonly></el-input>
          <el-input class="width-125" v-if="customerData.gender == 1" value="女" readonly></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <el-input class="width-125"  v-model="customerData.birthDay" readonly></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input class="width-125"  v-model="customerData.telPhone" readonly></el-input>
        </el-form-item>
        <el-form-item label-width="0">
          <el-button type="primary" icon="el-icon-collection" @click="openDialog('customerDetail')">详情</el-button>
        </el-form-item>
      </el-row>
      <el-divider content-position="left">接触镜评估</el-divider>
      <el-row class="bg-row">
        <el-form-item label-width="0">
          <el-radio-group v-model="dataForm.tryIn">
            <el-radio label="0">试戴</el-radio>
            <el-radio label="1">顾客要求不试戴</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row class="bg-row">
        <el-form-item label-width="0">
          <el-radio-group v-model="dataForm.type">
            <el-radio label="0">软镜</el-radio>
            <el-radio label="1">RPG</el-radio>
            <el-radio label="2">角膜塑形镜</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label-width="0">
          <el-button @click="addTried">增加试戴</el-button>
        </el-form-item>
      </el-row>

      <div v-for="(item,index) in dataForm.chkContactGlassItems" :key="index">
        <table class="miui-table">
          <tr>
            <td :colspan="item.type == '2' ? 14 : 13" style="position: relative;">
              试戴
              <el-button type="danger" size="mini" style="position: absolute;right: 15px;top: 5px;" @click="deleteHandle(index)">删除</el-button>
            </td>
          </tr>
          <tr>
            <td></td>
            <td>品种</td>
            <td>基弧</td>
            <td>屈光度</td>
            <td v-if="item.type == '2'">降幅</td>
            <td>直径</td>
            <td :colspan="3">追加</td>
            <td>VA</td>
            <td>定位</td>
            <td>活动度</td>
            <td v-if="item.type == '0'">覆盖</td>
            <td v-if="item.type == '1'">边翘</td>
            <td v-if="item.type == '2'">工作区</td>
            <td>建议</td>
          </tr>
          <tr>
            <td style="width: 60px;">OD</td>
            <td><el-input v-model="item.brandOd"></el-input></td>
            <td><el-input v-model="item.baseCurveOd"></el-input></td>
            <td><el-input v-model="item.diopterOd"></el-input></td>
            <td v-if="item.type == '2'"><el-input v-model="item.degradeOd"></el-input></td>
            <td><el-input v-model="item.diameterOd"></el-input></td>
            <td :colspan="3">
              <el-form-item label-width="0"><el-input  v-model="item.additionalOd" class="width-125"></el-input></el-form-item>
              <el-form-item label-width="0"><el-input v-model="item.cylOd" class="width-125"></el-input></el-form-item>
              <el-form-item label-width="0"><el-input v-model="item.axesOd" class="width-125"></el-input></el-form-item>
            </td>
            <td><el-input v-model="item.vaOd"></el-input></td>
            <td>
              <el-select v-model="item.locationOd">
                <el-option v-for="item in bizData.locationData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </td>
            <td>
              <el-select v-model="item.activityOd">
                <el-option v-for="item in bizData.activityData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </td>
            <td>
              <!-- <el-input v-model="item.zerodifferenceOd"></el-input> -->
              <el-select v-model="item.zerodifferenceOd" v-if="item.type == '0'">
                <el-option v-for="item in bizData.overlapData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
              <el-select v-model="item.zerodifferenceOd" v-if="item.type == '1'">
                <el-option v-for="item in bizData.edgeData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
              <el-select v-model="item.zerodifferenceOd" v-if="item.type == '2'">
                <el-option v-for="item in bizData.workspaceData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </td>
            <td>
              <el-select v-model="item.suggestionsOd">
                <el-option v-for="item in bizData.suggestionsData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td style="width: 60px;">OS</td>
            <td><el-input v-model="item.brandOs"></el-input></td>
            <td><el-input v-model="item.baseCurveOs"></el-input></td>
            <td><el-input v-model="item.diopterOs"></el-input></td>
            <td v-if="item.type == '2'"><el-input v-model="item.degradeOs"></el-input></td>
            <td><el-input v-model="item.diameterOs"></el-input></td>
            <td :colspan="3">
              <el-form-item label-width="0"><el-input  v-model="item.additionalOs" class="width-125"></el-input></el-form-item>
              <el-form-item label-width="0"><el-input v-model="item.cylOs" class="width-125"></el-input></el-form-item>
              <el-form-item label-width="0"><el-input v-model="item.axesOs" class="width-125"></el-input></el-form-item>
            </td>
            <td><el-input v-model="item.vaOs"></el-input></td>
            <td>
              <el-select v-model="item.locationOs">
                <el-option v-for="item in bizData.locationData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </td>
            <td>
              <el-select v-model="item.activityOs">
                <el-option v-for="item in bizData.activityData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </td>
            <td>
              <el-select v-model="item.zeroDifferenceOs" v-if="item.type == '0'">
                <el-option v-for="item in bizData.overlapData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
              <el-select v-model="item.zeroDifferenceOs" v-if="item.type == '1'">
                <el-option v-for="item in bizData.edgeData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
              <el-select v-model="item.zeroDifferenceOs" v-if="item.type == '2'">
                <el-option v-for="item in bizData.workspaceData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </td>
            <td>
              <el-select v-model="item.suggestionsOs">
                <el-option v-for="item in bizData.suggestionsData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </td>
          </tr>
        </table>
      </div>
      <div style="position: fixed;bottom: 0;left: 0;right: 0;height: 45px;background-color: #d2d9db;display: flex;align-items: center;justify-content: flex-end;padding: 0 40px;">
        <el-button type="primary" @click="refractiveFormSubmit" v-prevent-re-click>保 存</el-button>
      </div>
      <!-- <el-row style="margin: 15px auto;text-align: center;">
        <el-button type="primary" @click="refractiveFormSubmit" v-prevent-re-click>保 存</el-button>
      </el-row> -->
      <!-- 弹窗，查询顾客 -->
      <search-customer v-if="searchCustomerVisible" ref="searchCustomer" @refreshForm="getCustomerData"></search-customer>
      <!-- 弹窗，顾客详情 -->
      <detail-customer v-if="detailCustomerVisible" ref="detailCustomer"></detail-customer>
    </el-form>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { filterParams } from '@/util/tools'
  import { addChkOptometryBasic, saveContactGlassData, getContactGlass } from '@/api/admin/optometry/optometry'

  import SearchCustomer from '@/components/business/customer-search' // 查询顾客
  import DetailCustomer from '@/views/eims/customer/detail' // 顾客详情
  export default {
    data() {
      return {
        visible: false,
        activeName: 'five',
        id: '',
        searchCustomerVisible: false,
        detailCustomerVisible: false,
        checkData:{
          checkNumber: '',
          checkDate:'',
          checker:''
        },
        dataForm: {
          tryIn: '0',
          type: '0',
          chkContactGlassItems: []
        },
        customerData: {},
      }
    },
    components: {
      SearchCustomer,
      DetailCustomer
    },
    computed: {
      ...mapGetters(['permissions', 'bizData', 'userInfo', 'isCollapse'])
    },
    methods: {
      init(data) {
        this.visible = true
        this.checkData = data.checkData
        this.customerData = data.customer
        this.id = data.id
        for(let key in this.dataForm){
          if(key == 'chkContactGlassItems'){
            this.dataForm[key] = []
          }else{
            this.dataForm[key] = ''
          }
        }
        this.$nextTick(() => {
          if(this.id){
            getContactGlass(this.id).then(result => {
              let resultData = result.data.data
              if(resultData){
                this.dataForm = resultData
              }
            })
          }
        })
      },
      //  打开弹窗
      openDialog(name) {
        switch (name) {
          case 'customer':
            this.searchCustomerVisible = true
            this.$nextTick(() => {
              this.$refs.searchCustomer.init()
            })
            break;
          case 'customerDetail':
            this.detailCustomerVisible = true
            this.$nextTick(() => {
              this.$refs.detailCustomer.init(this.customerData.id, '会员详细')
            })
            break;
        }
      },
      //  获取客户信息
      getCustomerData(data) {
        this.customerData = data
      },
      //  增加试戴
      addTried() {
        let type = this.dataForm.type
        this.dataForm.chkContactGlassItems.push({type: type})
      },
      //  删除试戴
      deleteHandle(index) {
        this.dataForm.chkContactGlassItems.splice(index,1)
      },
      //
      refractiveFormSubmit() {
        if(this.dataForm.chkContactGlassItems && this.dataForm.chkContactGlassItems.length == 0){
          this.addTried()
        }

        let params1 = {
          chkNumber: this.checkData.checkNumber,
          customerId: this.customerData.id,
          customerName: this.customerData.name,
          personId: this.customerData.personId
        }
        if(!this.id){
          addChkOptometryBasic(params1).then(result => {
            this.id = result.data.data
            this.$emit('addBasic',result.data.data)
          })
        }else{
          this.$emit('addBasic',this.id)
        }
      },
      saveRefractive(data) {
        let params1 = {
          optometryBasicId: data,
          customerId: this.customerData.id,
          chkNumber: this.checkData.checkNumber
        }
        let params2 = filterParams(this.dataForm)
        saveContactGlassData(Object.assign(params1,params2)).then(result => {
          if(result.data.data){
            this.$message.success('接触镜评估保存成功')
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .bg-row {
    // background-color: #cadee8;
    padding-left: 15px;
    padding-top: 5px;
  }
  .width-125 {
    width: 125px;
  }
  .miui-table {
    width: 100%;
    margin: 10px 0;
    background-color: #b1e2ec3b;
    tr th {
      background-color: #f4f5f7;
    }

    tr th, tr td {
      padding: 10px 8px;
      border: solid 1px #e7e7e7;
      text-align: center;
    }
    .miui-table-header td{
      background-color: #7898a8;
      color: #fff;
    }
    .miui-table-tbody{
      background-color: #cadee8;
    }
  }
</style>
